import { Divider, Button, Input } from 'antd';
// import { Form } from "antd";
import Form, { Field } from './field-form';
import React from 'react';

export default function PropsComp() {
  const [number, setNumber] = React.useState(0);
  const handleClick = () => {
    setNumber(number + 1);
  };
  return (
    <div className="props">
      <p> ===props=== </p>
      <Button type="primary" onClick={handleClick}>
        change number
      </Button>
      <ClassComp number={number} />
      <FuncComp number={number} />
      <Divider />
      <FormComp />
      <Divider />
    </div>
  );
}

interface IProps {
  number: number;
}

interface IState {
  number: number;
}

// 监听props改变
class ClassComp extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = { number: 0 };
  }
  // @deprecated — 16.3, use static getDerivedStateFromProps instead; will stop working in React 17
  // componentWillReceiveProps() {}

  // https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops
  static getDerivedStateFromProps(props: IProps, state: IState) {
    // 返回一个对象来更新state, 如果返回null就不返回任何内容
    const { number } = props;
    if (number % 2 === 0) {
      return { number: number * 2 };
    } else {
      return { number: number * 3 };
    }
  }
  render() {
    return (
      <div>
        {this.props.number}: {this.state.number}
      </div>
    );
  }
}

function FuncComp(props: IProps): JSX.Element {
  const { number } = props;

  React.useEffect(() => {
    console.log(number);
  }, [number]);

  return <div>{number}</div>;
}

function FormComp() {
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
  return (
    <Form name="basic" onFinish={onFinish}>
      {/* <Form.Item label="Username" name="username"> */}
      <Field name="username">
        <Input />
      </Field>
      {/* </Form.Item> */}
      <Button htmlType="submit" type="primary">
        submit
      </Button>
    </Form>
  );
}
